<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/main.css" />
	<title>放学时间</title>
	<style>
		.main3 {
			background: #edf2f8;
			border-radius: 5px 5px 5px 5px;
			padding: 10px 10px 10px 10px;
			margin: 20px 10%;
			font-size: 18px;
			font-weight: lighter;
			text-align: center;
			line-height: 300%;
			box-shadow: 0 0 0 #ccc,
				0 -2px 3px #ccc,
				0 0 0 #ccc,
				2px 0 3px #ccc;
		}

		[v-if] {
			display: none;
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="header">
			<div class="header_title">放学时间</div>
			<a onclick="history.back()">
				<img src="image/return.png" alt="" class="return">
			</a>
		</div>
		<br /> <br /> <br />
		<div class="main3" v-if="item">
			<div>{{student.classesName}}</div>
			<div>放学状态：{{status(item)}}</div>
			<div>正常放学时间（{{item.startTime+' - '+item.endTime}}）</div>
			<div>今天放学时间（{{item.startTime1+' - '+item.endTime1}}）</div>
		</div>
	</div>


	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/js/common.js"></script>

	<script>
		var now = dayjs().format('HH:mm:ss');

		var app = new Vue({
			el: "#app",
			data: {
				item: null,
				student: getStudent()
			},
			created: function () {
				axios.get("/s/leaveTime").then(function (res) {
					this.item = res.data;
					if (!item.today) {
						item.startTime1 = it.startTime;
						item.endTime1 = it.endTime;
					}
				}.bind(this));
			},
			methods: {
				status: function (it) {
					if (now < it.startTime1) return '未放学';
					if (now > it.endTime1) return '已放学';
					return '放学中';
				},
			}
		});

	</script>
</body>

</html>